﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>imagr</title>

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.imgareaselect.js"></script>
	<script type="text/javascript" src="js/ui.base.js"></script>
	<script type="text/javascript" src="js/ui.resizable.js"></script>
	<script type="text/javascript" src="js/iutil.js"></script>
	<script type="text/javascript" src="js/idrag.js"></script>
	<script type="text/javascript" src="js/json2.js"></script>
	<script type="text/javascript" src="js/jquery.shortkeys.js"></script>
	<script type="text/javascript" src="js/colorpicker.js"></script>
    <script type="text/javascript" src="js/eye.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
	<script type="text/javascript" src="js/funcoes.js"></script>
	
	<link rel="stylesheet" type="text/css" href="css/estilos.css" />
	<link rel="stylesheet" type="text/css" href="css/colorpicker.css" />
</head>

<body>

<div id="site">
	<div id="imgArea">
		<img id="imagem" src="" />	
		<div id="avisos"><img src="img/loading.gif" alt="carregando" /><br/>aplicando configurações</div>
	</div>

	<div id="areaTXT">
		<div id="txtBox" style="position: absolute;">Seu texto aqui</div>
	</div>
	
	<div id="areaWM">
		<div id="wmBox" style="position: absolute;"></div>
	</div>

	<div id="toolbox">
		<p><img src="img/logo_small.jpg" alt="Visual Imagr" /></p>
		
		<p><a href="#" onclick="javascript:iniciaCarregarFoto();"><img src="img/ico/folder_image.png" alt="Carregar foto"/> Carregar foto</a></p>
		<p><a href="#" onclick="javascript:iniciaReiniciar();">Reiniciar edição</a></p>
		
		<hr />
		
		<p><a href="#" onclick="javascript:iniciaRecorte();"><img src="img/ico/cut.png" alt="Recortar"/> Recortar</a></p>
		<p><a href="#" onclick="javascript:iniciaRedimensionar();"><img src="img/ico/shape_handles.png" alt="Redimensionar"/> Redimensionar</a></p>
		<p><a href="#" onclick="javascript:iniciaGirar();"><img src="img/ico/arrow_rotate_anticlockwise.png" alt="Girar"/> Girar</a></p>
		<p><a href="#" onclick="javascript:iniciaInverter();"><img src="img/ico/arrow_refresh.png" alt="Inverter"/> Inverter</a></p>
		<p><a href="#" onclick="javascript:iniciaContraste();"><img src="img/ico/contrast.png" alt="Contraste"/> Contraste</a></p>
		<p><a href="#" onclick="javascript:iniciaWatermark();"><img src="img/ico/layers.png" alt="Marca dágua"/> Marca dágua</a></p>
		<p><a href="#" onclick="javascript:iniciaTexto();"><img src="img/ico/font.png" alt="Texto"/> Texto</a></p>
		<p><a href="#" onclick="javascript:iniciaNegativo();"><img src="img/ico/pictures.png" alt="Inverter cores"/> Iverter cores</a></p>
		<p><a href="#" onclick="javascript:iniciaGrayscale();"><img src="img/ico/grayscale.png" alt="Escala de cinza"/> Escala de cinza</a></p>
		<p><a href="#" onclick="javascript:iniciaColorir();"><img src="img/ico/palette.png" alt="Colorir"/> Colorir</a></p>
		
		<hr />
		
		<p><a href="#" onclick="javascript:cancelarAcao(1);"><img src="img/ico/arrow_undo.png" alt="Desfazer"/> Desfazer</a></p>
		<p><a href="#" onclick="javascript:iniciaSalvar();"><img src="img/ico/disk.png" alt="Salvar"/> Salvar arquivo</a></p>	
		<p><a href="#" onclick="javascript:exibeSobre();"><img src="img/ico/group.png" alt="Sobre o imagr"/> Sobre o imagr</a></p>
		<!--p><a href="#" onclick="javascript:iniciaEnviarEmail();"><img src="img/ico/mail.png" alt="Email"/> Enviar por e-mail</a></p-->

		
		<hr />

		<p id="powertoy" style="display: none">
			<strong>Histórico de ações:</strong>
			<textarea id="historicoAcoes"></textarea>
			<button type="button" onclick="javascript:executaAcoes();">Executar ações</button>
		</p>
	</div>
	
	<div id="toolboxOverlay" onclick="javascript:bloqueioToolbar();"></div>
	
	<div id="overlay"></div>
	
	<div id="barraRecorte" class="barraFerramentas">
		<a href="#" onclick="javascript:finalizaRecorte();">Aplicar recorte</a> | 
		<a href="#" onclick="javascript:cancelaRecorte();">Cancelar</a>
	</div>
	
	<div id="barraRedimensionar" class="barraFerramentas">
		<a  href="#" onclick="javascript:finalizaRedimensionar();">Aplicar dimensões</a> |
		<a  href="#" onclick="javascript:cancelaRedimensionar();">Cancelar</a>
	</div>
	
	<div id="barraGirar" class="barraFerramentas">
		<label for="girarGraus"><strong>Graus:</strong></label> <input type="text" id="girarGraus" value="90" size="3" />
		<a href="#" onclick="javascript:finalizaGirar();">Aplicar</a> |
		<a href="#" onclick="javascript:cancelaGirar();">Cancelar</a>
	</div>

	<div id="barraReiniciar" class="barraFerramentas">
		<p>
			Tem certeza?
			<a href="#" onclick="javascript:finalizaReiniciar();">Sim</a> | 
			<a href="#" onclick="javascript:cancelaReiniciar();">Não</a>
		</p>
	</div>
	
	<div id="barraCarregarFoto" class="barraFerramentas">
		<p>
			<label for="urlFoto"><strong>Via URL:</strong></label> <input type="text" id="urlFoto" value="" size="35" />
			<a href="#" onclick="javascript:finalizaCarregarFoto();">Carregar</a> |
			<a href="#" onclick="javascript:cancelaCarregarFoto();">Cancelar</a>
		</p> <br/>
		
		<p>
			<strong>Imagem da lista:</strong> <select id="imagens">
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/agua.jpg">Água</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/saopaulo.jpg">Av. Paulista</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/bebe_xicara.jpg">Bebê na xícara</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/cachorro.jpg">Cachorro</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/disney.jpg">Disney</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/grama.jpg">Grama</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/103324.jpg">São Paulo</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/ave.jpg">Vôo da Ave</option>
			</select>
		
			<a href="#" onclick="javascript:document.getElementById('urlFoto').value = document.getElementById('imagens').value;finalizaCarregarFoto();">carregar da lista</a>
		</p>

	</div>

	<div id="barraInverter" class="barraFerramentas">
		<strong>Inverter:</strong>
		<a href="#" onclick="javascript:finalizaInverter('horizontal');">Horizontalmente</a> |
		<a href="#" onclick="javascript:finalizaInverter('vertical');">Verticalmente</a> |
		<a href="#" onclick="javascript:cancelaInverter();">Cancelar</a>
	</div>
	
	<div id="barraContraste" class="barraFerramentas">
		<label for="qtdeContraste"><strong>Contraste (0-9999):</strong></label> <input type="text" id="qtdeContraste" value="100" size="3" />
		<a href="#" onclick="javascript:finalizaContraste();">Aplicar</a> |
		<a href="#" onclick="javascript:cancelaContraste();">Cancelar</a>
	</div>
	
	<div id="barraWatermark" class="barraFerramentas toolbarManyOpt">
		<p><label for="urlWatermark"><strong>URL da imagem:</strong></label> <input type="text" id="urlWatermark" value="" size="30" /></p>
		<p><label for="wmPosX"><strong>Posição X: </strong></label>
			<select id="wmPosX">
				<option value="esquerda">Esquerda</option>
				<option value="centro">Centro</option>
				<option value="direita">Direita</option>
			</select>
		</p>
		<p><label for="wmPosY"><strong>Posição Y: </strong></label>
			<select id="wmPosY">
				<option value="topo">Topo</option>
				<option value="centro">Centro</option>
				<option value="rodape">Rodapé</option>
			</select>
		</p>
		<p>
			<label for="wmW"><strong>Largura (px): </strong></label>
			<input type="text" id="wmW" value="80" size="3" />
		</p>
		<p>
			<label for="wmH"><strong>Altura (px): </strong></label>
			<input type="text" id="wmH" value="80" size="3" />
		</p>

		<p><label for="wmTransp"><strong>Opacidade (0-100):</strong></label> <input type="text" id="wmTransp" value="100" size="4" /></p>
		<p>
			<a href="#" onclick="javascript:finalizaWatermark();">Adicionar</a> |
			<a href="#" onclick="javascript:cancelaWatermark();">Cancelar</a>
		</p>
	</div>
	
	<div id="barraTexto" class="barraFerramentas toolbarManyOpt">
		<p><label for="texto"><strong>Texto:</strong></label> <input type="text" id="texto" value="Seu texto aqui" size="30" onkeyup="atualizaTexto(this.value);" onkeydown="atualizaTexto(this.value);" /></p>
		<p>
			<label for="texto"><strong>Cor:</strong></label>
			<input type="text" id="corR" size="2" onkeyup="javascript:cores();" />
			<input type="text" id="corG" size="2" onkeyup="javascript:cores();" />
			<input type="text" id="corB" size="2" onkeyup="javascript:cores();" />
		</p>
		<p>
			<label for="txtSize"><strong>Tamanho:</strong></label>
			<select id="txtSize" onchange="javascript:txtTamanho(this.value);">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="4">4</option>
				<option value="8">8</option>
				<option value="12">12</option>
				<option value="16" selected="selected">16</option>
				<option value="20">20</option>
				<option value="24">24</option>
			</select>
		</p>
		<p><a href="#" onclick="javascript:finalizaTexto();">Salvar</a> | <a href="#" onclick="javascript:cancelaTexto();">Cancelar</a></p>
	</div>
	
	<div id="barraColorir" class="barraFerramentas toolbarManyOpt">
		<p style="display: none">
			<label for="corR"><strong>Cor:</strong></label>
			<input type="text" id="corR" class="corR" name="corR" size="2" />
			<input type="text" id="corG" class="corG" name="corG" size="2" />
			<input type="text" id="corB" class="corB" name="corB" size="2" />
		</p>
		<div class="cp" style="padding-bottom:10px;"></div>
		<p><a href="#" onclick="javascript:finalizaColorir();">Salvar</a> | <a href="#" onclick="javascript:cancelaColorir();">Cancelar</a></p>
	</div>
	
	<div id="barraEnviarEmail" class="barraFerramentas">
		<label for="enderecoEmail"><strong>E-mail:</strong></label> <input type="text" id="enderecoEmail" value="" size="30" />
		<a href="#" onclick="javascript:finalizaEnviarEmail();">Enviar</a> |
		<a href="#" onclick="javascript:cancelaEnviarEmail();">Cancelar</a>
	</div>
	
	<div id="barraSalvar" class="barraFerramentas"></div>

	<div id="barraAvisos" class="barraFerramentas"></div>
	<div id="barraErros" class="barraFerramentas"></div>

</div>

</body>

</html>